<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Designer.aspx.cs" Inherits="Impact.Web.Admin.Designer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Impact Page Designer</title>
    
    <script type="text/javascript" src="javascript/jquery.js"></script>
    <script type="text/javascript" src="javascript/iresizable.js"></script>
    <script type="text/javascript" src="javascript/iutil.js"></script>
    <script type="text/javascript" src="javascript/idrag.js"></script>
    
    <link type="text/css" rel="stylesheet" href="css/designer.css" />
    
    <script type="text/javascript">
        var counter = 1;
        var verticalSnaps;
        
        function AddControl()
        {
            var newName = "Div"+ counter;
            counter += 1;
            
            var template = $("#dragTemplate .draggable").clone();
            template.prepend(newName);
        
            $("#container").append(template);
            
            template.Resizable(
			    {
				    minWidth: 50,
				    minHeight: 50,
				    minTop: 1,
				    minLeft: 1,
				    dragHandle: true,
				    onDrag: onDragHandler,
				    onResize : onResizeHandler,
				    handlers: { e: '#resizeE', s: '#resizeS' }
			    }
			);
            
            template.attr("id", newName);
            template.css("left", "0").css("top", "0");
            template.fadeIn("slow");

        }
        
        function onResizeHandler(size, position)
        {
            //var snap = document.form1.sizeSnap.value;
            //size.width = Math.round(size.width / snap) * snap;
            //size.height = Math.round(size.height / snap) * snap;
            
            var right = position.left + size.width;
            right = snapToGuide(right);
            size.width = right - position.left;
            
            $("#position", $(this)).empty().append("(x:"+ position.left +", y:"+ position.top +")<br/>(w:"+ size.width +",h:"+ size.height +")");				            
        }
        
        // find the closest guide (on the x-axis), and returns the value of the guide
        function snapToGuide(val)
        {
            var output = val;
            for(var i = 1; i <= verticalSnaps.length; i++)
            {
                var lower = verticalSnaps[i] - ((verticalSnaps[i] - verticalSnaps[i-1]) / 2)
                var upper = verticalSnaps[i] + ((verticalSnaps[i+1] - verticalSnaps[i]) / 2)
                if(isBetween(val, lower, upper))
                {
                    output = verticalSnaps[i];
                }
            }
            return Math.round(output);
        }
        
        function onDragHandler(x, y)
        {
            var dragged = this;
            var dragLeft = x; //this.offsetLeft;
            var dragRight = dragLeft + this.offsetWidth;
            var dragTop = y; //this.offsetTop;
            var dragBottom = dragTop + this.offsetHeight;
            
            var newX = x;
            var newY = y;
            
            //document.form1.output1.value = "param("+ x +", "+ y +")";
            //document.form1.output2.value = "dragged("+ dragLeft +", "+ dragTop +")";
        
            var allControls = $("#container .draggable");
            if(allControls.length > 1)
            {
                allControls.each(function(index)
                {
                    if(dragged.id != this.id)
                    {
                        var targetLeft = this.offsetLeft;
                        var targetRight = targetLeft + this.offsetWidth;
                        var targetTop = this.offsetTop;
                        var targetBottom = targetTop + this.offsetHeight;
                        
                        //document.form1.output5.value = this.id +"("+ targetLeft +", "+ targetTop +"; "+ targetRight +", "+ targetBottom +")";
                        
                        if( isBetween(dragLeft, targetLeft, targetRight) &&
                            (  isBetween(dragTop, targetTop, targetBottom) ||
                               isBetween(dragBottom, targetTop, targetBottom)
                            )
                          )
                        {
                            //document.form1.output4.value = "path 1";
                            newX = targetRight;
                        }
                        
                        else if( isBetween(dragRight, targetLeft, targetRight) &&
                            (  isBetween(dragTop, targetTop, targetBottom) ||
                               isBetween(dragBottom, targetTop, targetBottom)
                            )
                          )
                        {
                            //document.form1.output4.value = "path 2";
                            newX = targetLeft - dragged.offsetWidth;
                        }
                        
                        else if( isBetween(dragTop, targetTop, targetBottom) &&
                            (  isBetween(dragLeft, targetLeft, targetRight) ||
                               isBetween(dragRight, targetLeft, targetRight)
                            )
                          )
                        {
                            //document.form1.output4.value = "path 3";
                            newY = targetBottom;
                        }
                        
                        else if( isBetween(dragBottom, targetTop, targetBottom) &&
                            (  isBetween(dragLeft, targetLeft, targetRight) ||
                               isBetween(dragRight, targetLeft, targetRight)
                            )
                          )
                        {
                            //document.form1.output4.value = "path 4";
                            newY = targetTop;
                        }
                        
                    }
                });
            }
            
            
            var snap = document.form1.positionSnap.value;
            newX = Math.round(newX / snap) * snap;
            newY = Math.round(newY / snap) * snap;           
            
            $("#position", $(this)).empty().append("(x:"+ newX +", y:"+ newY +")<br/>(w:"+ this.offsetWidth +",h:"+ this.offsetHeight +")");
            
            //document.form1.output3.value = "return("+ newX +", "+ newY +")";
            return [newX, newY];
        }
        
        function isBetween(a, b, c)
        {
            return (a >= b && a <= c);
        }
        
        
        function RemoveControl(control)
        {
            var elem = control;
            $(control).fadeOut("slow");
        }
        
        function changeWidth()
        {
            var val = document.form1.contentWidth.value;
            if(val != NaN)
            {
                $("#container").css("width", val +"px");
            }
            changeColumns();
        }
        
        function align(val)
        {
            $("#container").removeClass().addClass(val);
        }
        
        function changeColumns()
        {
            var mainWidth = new Number(document.form1.contentWidth.value);
            var numColumns = document.form1.columns.value;
            verticalSnaps = new Array();
            
            $("#container .guide").remove();
            for(var i = 0; i < numColumns; i++)
            {
                var x = (mainWidth / numColumns) * i;
                createGuide(x);
            }
            createGuide(mainWidth);
            
        }
        
        function createGuide(xPos)
        {
            var template = $("#guideTemplate .guide").clone();
            template.css("left", xPos);
            
            $("#container").append(template);
            verticalSnaps.push(xPos);
        }
        
        $(function()
        {
            // add event handlers
            $("#contentWidth").keyup(changeWidth);
            //$("#alignLeft").change(function() { align('left'); });
            //$("#alignCenter").change(function() { align('center'); });
            //$("#alignRight").change(function() { align('right'); });
            $("#columns").keyup(changeColumns);
            
            changeWidth();
        });
    
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
    <div id="everything">
    
        <div id="container" class="left">
        </div>    
    
        
        <div id="toolbox">
        
            Add Control:<br />
            <select id="controlType">
                <option>Header</option>
                <option>Body</option>
                <option>Footer</option>
            </select><br />        
            <a href="#" onclick="AddControl();">Add Control</a><br />
            <br />
            <a href="#">Save</a><br />
            <a href="#">Close</a><br />
            <hr />
            
            <label for="contentWidth">Width:</label>
                <input id="contentWidth" type="text" value="600" style="width: 40px;" />px<br />
            Aligned:<br />
            <input id="alignLeft" name="align" value="left" type="radio" checked="checked" />
                <label for="alignLeft">Left</label><br />
            <input id="alignCenter" name="align" value="center" type="radio" />
                <label for="alignCenter">Center</label><br />
            <input id="alignRight" name="align" value="right" type="radio" />
                <label for="alignRight">Right</label><br />
            
            <label for="columns">Columns:</label>    
                <input id="columns" type="text" value="1" style="width: 30px;" />
                
            <hr />
            
            <label for="positionSnap">Grid Snap (pixels):</label><br />            
                <input id="positionSnap" type="text" value="2" style="width: 30px; margin-left: 20px;" />px<br />
            <label for="sizeSnap">Resize Snap (pixels):</label><br />
                <input id="sizeSnap" type="text" value="20" style="width: 30px; margin-left: 20px;" />px<br />
                
            <hr />
            
        </div>
    
    </div>
    </form>
    
    <div id="guideTemplate" style="visibility:hidden;">
        <div class="guide"></div>
    </div>
    
    <div id="dragTemplate" style="visibility: hidden;">
        <div class="draggable">
            <a href="#" onclick="RemoveControl(this.parentNode); return false;">[x]</a><br />
            <div id="position"></div>
            
            <div id="resizeE"></div>
            <div id="resizeS"></div>

            <!--             
            <div id="resizeSE"></div>
            <div id="resizeNE"></div>
            <div id="resizeN"></div>
            <div id="resizeNW"></div>
            <div id="resizeW"></div>
            <div id="resizeSW"></div>
            -->
        </div>
    </div>
    
</body>
</html>
